<template>
	<view class="settle-box">
		<!-- 左 选择框 -->
		<view class="radio-box">
			<label class="radio" @click="clickHandler">
				<!-- 全部商品数量 , 已勾选商品数量 -->
				<radio color="#ea4350" :checked="isAllChecked" />
				<text>全选</text>
			</label>
		</view>
		<!-- 总金额 -->
		<view class="all-money">
			合计:<text class="red">￥{{checkedPrice}}</text>
		</view>
		<!-- 结算按钮 -->
		<view class="btn" @click="settle">结算{{checkedCount}}</view>
	</view>
</template>

<script>
	/**
	 * 1.点击全选/反选
	 * 2.已勾选商品总金额
	 * 3.已勾选商品总数量
	 * 4.结算
	 * */
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-settle",
		data() {
			return {

			};
		},
		computed: {
			...mapState('m_user', ['address', 'token']),
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['checkedCount', 'allGoodsCount', 'checkedPrice']),
			...mapGetters('m_user', ['addstr']),
			isAllChecked() {
				return this.checkedCount === this.allGoodsCount
			}
		},
		methods: {
			...mapMutations('m_user', ['updateRedirectInfo']),
			...mapMutations('m_cart', ['updateCart']),
			//微信支付
			async payment() {
				//1.创建 订单
				//准备参数
				const params = {
					//订单的总价
					// 开发期间，注释掉真实的订单价格，
					// order_price: this.checkedGoodsAmount,
					// 写死订单总价为 1 分钱
					order_price: 0.01,
					//收货地址
					consignee_addr: this.addstr,
					goods: this.cart.filter(x => x.goods_state).map(x => ({
						goods_id: x.goods_id,
						goods_number: x.goods_count,
						goods_price: x.goods_price
					}))
				}
				//1.2发起请求创建订单
				const orderRes = await uni.$http.post('/api/public/v1/my/orders/create', params)
				if (orderRes.data.meta.status !== 200) return uni.$showMsg('创建订单失败!')
				//console.log(orderRes.data.message.order_number)
				//2.订单预支付-为了获取支付参数
				const res = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
					order_number: orderRes.data.message.order_number
				})
				if (res.data.meta.statue !== 200) return uni.$showMsg('订单预支付失败')
				//3.支付
				const [payErr] = await uni.requestPayment(res.data.message.pay)
				if (payErr) return uni.$showMsg('支付失败')
				//提示用户
				uni.$showMsg('支付成功')
				//清空已勾选商品
				this.updateCart(this.cart.filter(e => !e.goods_state))
				console.log(res.data.message.pay)
			},
			//结算
			async settle() {
				//判断是否选择了收货信息
				if (Object.keys(this.address).length === 0) return uni.$showMsg('请选择收货地址')
				//判断是否选中了结算商品
				if (this.checkedCount === 0) return uni.$showMsg('请选择需要结算的商品')
				//判断是否登录
				if (!this.token) {
					//console.log(1);
					let n = 3
					uni.$showMsg(`请登录后进行结算,页面将于${n}秒后跳转到登录页面`)
					//倒计时跳转到登录
					let timer = setInterval(() => {
						n--
						if (n === 0) {
							//清空定时器
							clearInterval(timer)
							//跳转页面
							uni.switchTab({
								url: '/pages/my/my',
								success: () => {
									//设置redirectInfo参数
									this.updateRedirectInfo({
										from: '/pages/cart/cart',
										type: 'switchTab'
									})
								}
							})
							return
						}
						//打开弹窗
						uni.$showMsg(`请登录后进行结算,页面将于${n}秒后跳转到登录页面`)
					}, 1000)
					return
				}
				this.payment()
			},
			clickHandler() {
				this.$emit('all-radio-change', !this.isAllChecked)
			}
		}
	}
</script>

<style lang="scss">
	.settle-box {
		height: 50px;
		box-sizing: border-box;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		background-color: #fff;
		padding-left: 5px;

		.red {
			color: #ea4350;
			font-size: 14px;
		}

		.btn {
			width: 90px;
			color: #fff;
			line-height: 50px;
			text-align: center;
			background-color: #ea4350;
		}
	}
</style>
